<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2021.8.1——axios</title>
	</head>
	<style type="text/css">
		[v-clock] {
			display: none;
		}
	</style>
	<body>
		<!-- view层 模板 -->
		<div id="app" v-clock>
			<!-- 添加了一个clock属性，避免页面加载的时候会闪现页面模板 -->
			{{whkgogo.name}}
			<br>
			{{whkgogo.age}}
			<br>
			{{whkgogo.isStudent}}
			<br>
			{{whkgogo.obj[1]}}
			<br>
			{{whkgogo.aimCompany.cName}}
			<br>
			{{whkgogo.aimCompany.cAddress}}
			<br>
			{{whkgogo.aimCompany.cMoney}}
			<br>
			{{whkgogo.links}}
			<br>
			<br>
			<br>
			<br>
			
			<div class="computed_test">
				<p>使用方法获取当前时间戳：{{timeNowMethods()}}</p>
				<p>使用计算属性获取当前时间戳：{{timeNowComputed}}</p>
				<p>两者的区别：计算属性是将计算出来的值存储在缓存中，对于计算不频繁计算起来又较为繁琐的数值，使用
				计算属性可以很好的提高浏览器效率</p>
				<p>使用方法的话每次用到都调用一次方法，可能会造成浏览器资源浪费，如果计算数值繁琐，同时访问人数较多，
				就很容易造成浏览器崩溃，所以建议使用computed计算属性，同时computed计算属性是VUE的特色功能</p>
			</div>
		</div>
		<!-- vue.js的导入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- axios的导入 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
			// 定义一个组件
			Vue.component("show_text", {
				// 组件内需要接收的属性为text
				props: ["text"],
				// 模板中显示通过属性传过来的值
				template: `<p >{{text}}</p>`
			})
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						message:"这是message",
						whkgogo: {
							name: null,
							age: null,
							isStudent: null,
							obj: [],
							aimCompany: {
								cName: null,
								cAddress: null,
								cMoney: null
							},
							links: [{
								name: null,
								url: null
							}]
						}
					}
				},
				// 钩子函数（链式编程也就是get.then.next....）
				mounted() {
					axios.get('test_data.json').then(response => (this.whkgogo = response.data));
					// 请求了test_data.json中的json数据,并将请求回来的数据存放在whkgogo中
				},
				methods:{
					timeNowMethods(){
						return Date.now();
					}
				},
				computed:{
					timeNowComputed(){
						this.message;
						return Date.now();
					}
				}



			})
		</script>
	</body>
</html>
